﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>vpGrid</title>
    <link href="../../../Styles/jQuery-UI/vp/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
    <link href="../../../Styles/qTip2/qTip2-2.2.0/jquery.qtip.min.css" rel="stylesheet" />
    <link href="../../../Styles/jqGrid/jqGrid-4.6.0/ui.jqgrid.css" rel="stylesheet" />
    <link href="../../../Styles/vpGrid/vpGrid-1.3.3.css" rel="stylesheet" />

    <!-- jQuery -->
    <script src="../../../Scripts/jQuery/jquery-1.11.0.min.js"></script>

    <!--jQuery-UI-->
    <script src="../../../Scripts/jQuery-UI/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="../../../Scripts/jQuery-UI/i18n/jquery.ui.datepicker-en-GB.js"></script>

    <!-- qTip2-->
    <script src="../../../Scripts/qTip2/qTip2-2.2.0/jquery.qtip.min.js"></script>

    <!--jqGrid-->
    <script src="../../../Scripts/jqGrid/jqGrid-4.6.0/i18n/grid.locale-en.js"></script>
    <script src="../../../Scripts/jqGrid/jqGrid-4.6.0/jquery.jqGrid.src.js"></script>

    <!--vpGrid-->
    <script src="../../../Scripts/vpGrid/vpGrid-1.3.3.js"></script>
    <script src="../../../Scripts/vpGrid/i18n/vpGrid-1.3.3.locale-en.js"></script>

    <!--Your Grid-->
    <script src="Scripts/myGrid-Part1.js"></script>
</head>
<body>
    <!-- vpGrid start-->
    <div role="vpgrid-quick-launch" class="vpgrid-quick-launch">
        &nbsp;
    </div>
    <div role="vpgrid-container" class="vpgrid-container">
        
        <!--  Grid Title-->
        <h1 class="vpgrid-title">vpGrid in action</h1>

        <!-- grid header -->
        <!-- the grid header holds any button to click on to do an action on a selected item or to do any global action.
         This header is similar to the ribbon encountered in Microsoft software like SharePoint and Office.
         This header can be used to hold fields used as remote filters. (Useful when the grid is configured with the option loadGridOnPageLoad : false)
    -->
        <div role="vpgrid-header" class="vpgrid-header ui-jqgrid ui-widget ui-widget-content ui-corner-bottom no-border">

            <div role="vpgrid-ribbon"
                 class="vpgrid-header-body">
                <!-- this button enables to create a new item inside a jQuery UI dialog.
            All form fields ara embedded in a fluent 12 columns grid.
            This fluent grid is inspired from twitter Bootstrap.
            Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItem"
            -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItem",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item
                </button>

                <!-- this button enables to create a new item inside a jQuery UI dialog with Tabs
                Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridAddNewItemWithTabs"
            -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItemWithTabs",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item (UI tabs)
                </button>

                <!-- this button enables to view/edit the selected item inside a jQuery UI dialog with Tabs
            Click on this button will open the UI-Dialog identified by the params value : "params":"vpGridEditItemWithTabs"
            -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-pencil"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-pencil"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialogWithSelectedItem", "params":"vpGridEditItemWithTabs",  "async" : true, "asyncKey" : "onEditItemClick"}}'>
                    View/Edit selected Item (UI tabs)
                </button>

                <!-- this button enables to open another vpGrid web page or any Web page (in the same doamin) within a jQuery UI Dialog
                (an automatic generated iframe within a jQuery UI Dialog)
                Click on this button will open the UI-Dialog identified by the params value : "params":{"dialogId":"serverSideDialog1", ...
            -->
                <button type="button" class="ui-button-text-icon-primary ui-icon-search"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-search"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openServerSideDialogWithSelectedItem", "params":{"dialogId":"serverSideDialog1","sizeRatio":"0.9"},  "async" : true, "asyncKey" : "onChildItemClick"}}'>
                    View/Edit related child items
                </button>

            </div>
            <!-- end header body -->

        </div>
        <!-- end grid header -->



        <!-- Grid body : jqgrid-->
        <div role="vpgrid-body" class="vpgrid-body">

            <table role="vpgrid-schema">
                <!-- Schema definition of the grid-->
                <thead>

                    <!-- Custom jqGrid Caption -->
                    <tr class="ui-widget-header">
                        <th colspan="18">
                            <div role="vpgrid-schema-caption">
                                <span class="left">
                                    Product Type :
                                    <select id="activites"
                                            role="vpgrid-remote-data-filter"
                                            data-vpgrid-remote-data-filter-column-name="salable"
                                            data-vpgrid-remote-data-filter-key="ProductType"
                                            data-vpgrid-ui-element="true"
                                            data-vpgrid-datasource="MockRequests/GetKeyValues_AllKindOfProducts.html"
                                            data-vpgrid-datasource-type="web"
                                            data-vpgrid-timeline-sequence="GridLoading"
                                            data-vpgrid-handlers='{"change" : { "handler" : "vpGrid.reloadGrid", "params":"activites",  "async" : true, "asyncKey" : "onSelectChange"}}'></select>

                                </span>
                                <span role="vpgrid-ajax-trace" class='vpgrid-ajax-trace'></span>

                            </div>
                        </th>
                    </tr>
                    <!-- End Custom jqGrid Caption -->

                    <tr role="vpgrid-schema-columns" class="ui-widget-header">
                        <!-- 1st column-->
                        <th class="center"
                            data-vpgrid-column-name="remoteId"
                            data-vpgrid-column-type="key"
                            data-vpgrid-column-width="1"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false">Remote ID</th>

                        <!--2nd column-->
                        <th class="center"
                            data-vpgrid-column-name="name"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Product Name</th>

                        <th class="center"
                            data-vpgrid-column-name="producNumber"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="80"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Product Number</th>

                        <th class="center"
                            data-vpgrid-column-name="comments"
                            data-vpgrid-column-type="note"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Comments</th>

                        <!--3rd column-->
                        <th class="center"
                            data-vpgrid-column-name="salable"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-select-options="Yes:Yes;No:No;Maybe:Maybe"
                            data-vpgrid-column-align="center">On Sale</th>

                        <!--4th column-->
                        <th class="center"
                            data-vpgrid-column-name="price"
                            data-vpgrid-column-type="currency"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-filterable="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="true"
                            data-vpgrid-column-min-value="0"
                            data-vpgrid-column-max-value="6000"
                            data-vpgrid-column-remote-validation-url="MockRequests/Validator1.html"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell"
                            data-vpgrid-column-info="End user price. Does not include VAT">Price</th>

                        <!--5th column-->
                        <th class="center"
                            data-vpgrid-column-name="style"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="autocomplete"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Style</th>

                        <!--6th column-->
                        <th class="center"
                            data-vpgrid-column-name="safetyStockLevel"
                            data-vpgrid-column-type="int"
                            data-vpgrid-column-min-value="10"
                            data-vpgrid-column-max-value="1200"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-summary-always-update="true"
                            data-vpgrid-column-css="vpgrid-cell">Safety Stock Level</th>


                        <th class="center"
                            data-vpgrid-column-name="safetyStockValue"
                            data-vpgrid-column-type="currency"
                            data-vpgrid-column-width="30"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-max-value="20000"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-summary-always-update="true"
                            data-vpgrid-column-css="vpgrid-cell">Safety Stock Value</th>

                        <!--7th column-->
                        <th class="center"
                            data-vpgrid-column-name="color"
                            data-vpgrid-column-type="string"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="autocomplete"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-locked="true"
                            data-vpgrid-column-css="vpgrid-cell">Color</th>

                        <!--8th column-->
                        <th class="center"
                            data-vpgrid-column-name="weight"
                            data-vpgrid-column-type="number"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-min-value="0"
                            data-vpgrid-column-max-value="1200"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Weight (LB)</th>

                        <th class="center"
                            data-vpgrid-column-name="startDate"
                            data-vpgrid-column-type="date"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-required="false"
                            data-vpgrid-column-align="left"
                            data-vpgrid-column-css="vpgrid-cell">Start Date</th>


                        <!--2nd column-->
                        <th class="center"
                            data-vpgrid-column-name="year"
                            data-vpgrid-column-type="year"
                            data-vpgrid-column-width="60"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="true"
                            data-vpgrid-column-edittype="select"
                            data-vpgrid-column-align="center"
                            data-vpgrid-column-min-value=2010
                            data-vpgrid-column-max-value=2015
                            data-vpgrid-column-css="vpgrid-cell">Year</th>


                        <!--8th column-->
                        

                        <!--9th column-->
                        <th class="center"
                            data-vpgrid-column-name="isDeletable"
                            data-vpgrid-column-type="actionValidator"
                            data-vpgrid-column-actiontype="deleteItem"
                            data-vpgrid-column-width="20"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-align="center"></th>


                        <!--9th column-->
                        <th class="center"
                            data-vpgrid-column-name="delete"
                            data-vpgrid-column-type="action"
                            data-vpgrid-column-actiontype="deleteItem"
                            data-vpgrid-column-width="20"
                            data-vpgrid-column-fixed-width="true"
                            data-vpgrid-column-hidden="false"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-align="center"></th>

                        <th class="center"
                            data-vpgrid-column-name="isUpdatable"
                            data-vpgrid-column-type="actionValidator"
                            data-vpgrid-column-actiontype="updateItem"
                            data-vpgrid-column-width="10"
                            data-vpgrid-column-hidden="true"
                            data-vpgrid-column-editable="false"
                            data-vpgrid-column-sortable="false"
                            data-vpgrid-column-css="vpgrid-cell"></th>

                    </tr>
                </thead>
                <tfoot>
                    <tr class="ui-widget-header" colspan="8">
                        <td >
                            <div role="vpgrid-schema-status-bar">
                                
                                <div class="vpgrid-status-group vpgrid-hidden"
                                     data-vpgrid-ui-id="itemsCountStatus">
                                    Items :
                                    <span data-vpgrid-ui-content-placeholder="true"
                                          data-vpgrid-ui-id="vpGrid.filteredItemCount"
                                          data-vpgrid-datasource="vpGrid.filteredItemCount"
                                          data-vpgrid-datasource-type="handler"
                                          data-vpgrid-timeline-sequence="GridLoaded">
                                    </span>
                                    <!-- 
                                    /
                                    <span data-vpgrid-ui-content-placeholder="true"
                                            data-vpgrid-ui-id="vpGrid.totalItemCount"
                                            data-vpgrid-datasource="vpGrid.totalItemCount"
                                            data-vpgrid-datasource-type="handler"
                                            data-vpgrid-timeline-sequence="GridLoaded">
                                    </span>
                                    -->
                                </div>

                                <div class="vpgrid-status-group"
                                     data-vpgrid-ui-id="dataLoadingStatus">
                                    Loading data in grid (
                                    <span data-vpgrid-ui-id="dataLoadingProgress"></span>)
                                </div>
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>

        </div>
        <!-- End Grid body-->
        

        <!-- grid footer -->
        <div role="vpgrid-footer" class="vpgrid-footer ui-jqgrid ui-widget ui-widget-content ui-corner-bottom no-border">
            <!-- footer header -->
            <!--
        <div class="ui-jqgrid-view ui-jqgrid-titlebar ui-widget-header ui-helper-clearfix">
            <span class=ui-jqgrid-title>Actions possibles</span>
        </div>
        -->
            <!-- end footer header -->
            <!-- footer body -->
            <div role="vpgrid-ribbon"
                 class="vpgrid-footer-body">
                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItem",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item
                </button>

                <button type="button" class="ui-button-text-icon-primary ui-icon-plusthick"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialog", "params":"vpGridAddNewItemWithTabs",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Add a new Item (UI tabs)
                </button>

                <button type="button" class="ui-button-text-icon-primary ui-icon-pencil"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-pencil"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openModalDialogWithSelectedItem", "params":"vpGridUpdateItemWithTabs",  "async" : true, "asyncKey" : "onNewItemClick"}}'>
                    Update selected Item (UI tabs)
                </button>

                <button type="button" class="ui-button-text-icon-primary ui-icon-search"
                        data-vpgrid-ui-widget="button"
                        data-vpgrid-ui-disabled="true"
                        data-vpgrid-ui-disabled-on="noItemSelected"
                        data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-search"}}'
                        data-vpgrid-timeline-sequence="GridLoading"
                        data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.openServerSideDialogWithSelectedItem", "params":{"dialogId":"serverSideDialog1","sizeRatio":"0.9"},  "async" : true, "asyncKey" : "onButtonClick"}}'>
                    View History
                </button>

            </div>
            <!-- end footer body -->

        </div>
        <!-- end grid footer -->


        <!-- Partial layouts-->

        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridErrorOnDataLoad"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p>
                The grid is empty because of a communication error. Check that the server is up and running.
            </p>
        </div>

        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id ="vpGridEmptyOnDataLoad" 
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p data-vpgrid-ui-id="customMessage">
                The grid is empty because there is no item to load from your request.
            </p>
        </div>

        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridEmptyOnGridComplete"
             style="padding-top:20px;padding-left:20px;" class="vpgrid-hidden">
            <p>
                No data has been found for your search. Either change the filter value or reset at least one filter.
            </p>
        </div>

        <div role="vpgrid-partial-ui"
             data-vpgrid-ui-id="vpGridSettingsButton"
             class="vpgrid-settings-button vpgrid-hidden">
            <span></span>
            <span class="second"></span>
            <span class="third"></span>
        </div>

        <!-- modal dialog windows-->
        <div role="vpgrid-modal-dialog"
             title="Communicating with server..."
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridLoading"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoading">

            <span class="ui-icon  ui-icon-clock" style="float: left; margin: 3px 7px 40px 0;"></span>
            Please wait until all data is loaded.
        </div>


        <div role="vpgrid-modal-dialog"
             title="Add new Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridAddNewItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <div class="form-vpgrid-modal-dialog">
                <!-- first column-->
                <div class="vp-row">
                    <!-- label -->
                    <div class="span4 text-right ">Product Name :</div>
                    <!-- input cell -->
                    <div class="span8 text-center text-small">
                        <input type="text" name="name" id="name"
                               class="text ui-widget-content ui-corner-all"
                               data-vpgrid-column-name="name"
                               data-vpgrid-ui-widget="autocomplete"
                               data-vpgrid-ui-widget-options='{"minLength": "0"}'
                               data-vpgrid-timeline-sequence="GridLoaded"
                               data-vpgrid-datasource="MockRequests/AutocompleteDataSource.html"
                               data-vpgrid-datasource-type="web" />
                    </div>
                    <!-- end input cell -->
                </div>
                <!-- end first column-->
                <!-- 2nd column-->
                <div class="vp-row">
                    <!-- label -->
                    <div class="span4 text-right ">Price :</div>
                    <!-- input cell -->
                    <div class="span8 text-center text-small">
                        <input type="text" name="price" id="price"
                               class="text ui-widget-content ui-corner-all"
                               data-vpgrid-column-name="price" />
                    </div>
                    <!-- end input cell -->
                </div>
                <!-- end 2nd column-->


                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-plusthick"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.addNewItem", "params":"last", "async" : true}}'>
                            Add
                        </button>

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
                </div>

        </div>



        <div role="vpgrid-modal-dialog"
             title="Add new Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridAddNewItemWithTabs"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <div class="form-vpgrid-modal-dialog">
                <!-- tabs -->
                <div data-vpgrid-ui-widget="tabs"
                     data-vpgrid-ui-widget-options='{"active": "0", "heightStyle" : "content"}'
                     data-vpgrid-timeline-sequence="GridLoaded">
                    <ul>
                        <li><a href="#tabs-1">tab1</a></li>
                        <li><a href="#tabs-2">tab2</a></li>
                    </ul>
                    <!-- TAB 1-->
                    <div id="tabs-1">
                        <!-- first column-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Product Name :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="name" id="name"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="name" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end first column-->
                        <!-- 2nd column-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Price :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="price" id="price"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="price" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end 2nd column-->

                        <!-- Nth column-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Style :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <select id="style"
                                        data-vpgrid-column-name="style"
                                        data-vpgrid-timeline-sequence="GridLoaded">
                                    <option>Universal</option>
                                    <option>Women's</option>
                                </select>
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Nth column-->

                        <!-- 2nd column-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Weight :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="weight" id="weight"
                                       class="text ui-widget-content ui-corner-all"
                                       data-vpgrid-column-name="weight" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end 2nd column-->


                    </div>
                    <!-- end TAB 1-->
                    <!-- TAB 2-->
                    <div id="tabs-2">
                    </div>
                    <!-- end TAB 2-->

                </div>
                <!-- end tabs -->

                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-plusthick"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-plusthick"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.addNewItem", "params":"last", "async" : true}}'>
                            Add
                        </button>

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>


        <div role="vpgrid-modal-dialog"
             title="Change Item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridUpdateItemWithTabs"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">


            <!-- Dialog title content redefinition-->
            <div role="vpgrid-dialog-title-bar" class="vpgrid-hidden ">
                <span>Change Item : </span>
                <span data-vpgrid-column-name="name"></span>
            </div>
            <!-- End Dialog title content definition-->

            <div class="form-vpgrid-modal-dialog">
                <!-- hidden input fields-->
                <input type="hidden" data-vpgrid-column-name="remoteId" />
                <!-- end hidden input fields-->

                <!-- tabs -->
                <div data-vpgrid-ui-widget="tabs"
                        data-vpgrid-ui-widget-options='{"active": "0", "heightStyle" : "content"}'
                        data-vpgrid-timeline-sequence="GridLoaded">
                    <ul>
                        <li><a href="#tabs-1">tab1</a></li>
                        <li><a href="#tabs-2">tab2</a></li>
                    </ul>
                    <!-- TAB 1-->
                    <div id="tabs-1">
                        <!-- first column-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Product Name :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="name" id="name"
                                        class="text ui-widget-content ui-corner-all"
                                        data-vpgrid-column-name="name" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end first column-->
                        <!-- 2nd column-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Price :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <input type="text" name="price" id="price"
                                        class="text ui-widget-content ui-corner-all"
                                        data-vpgrid-column-name="price" />
                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end 2nd column-->
                        <!-- Nth column-->
                        <div class="vp-row">
                            <!-- label -->
                            <div class="span4 text-right ">Style :</div>
                            <!-- input cell -->
                            <div class="span8 text-center text-small">
                                <!-- test for same input field twice but one his hidden-->
                                <select id="style" class="vpgrid-hidden"
                                        data-vpgrid-column-name="style"
                                        data-vpgrid-timeline-sequence="GridLoaded">
                                    <option>Universal</option>
                                    <option>Women's</option>
                                </select>

                                <select id="style"
                                        data-vpgrid-column-name="style"
                                        data-vpgrid-timeline-sequence="GridLoaded">
                                    <option>Universal</option>
                                    <option>Women's</option>
                                </select>

                                

                            </div>
                            <!-- end input cell -->
                        </div>
                        <!-- end Nth column-->

                    </div>
                    <!-- end TAB 1-->
                    <!-- TAB 2-->
                    <div id="tabs-2">
                    </div>
                    <!-- end TAB 2-->

                </div>
                <!-- end tabs -->

                <hr />
                <!-- form buttons-->
                <div class="vp-row  vp-modal-dialog-bottom-buttons">
                    <div class="span12">

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-circle-arrow-e"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-circle-arrow-e"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.updateItem", "params":{"tag":"partialUpdate1", "crudKey":"update2"}, "async" : true}}'>
                            Update
                        </button>

                        <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                                data-vpgrid-ui-widget="button"
                                data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                                data-vpgrid-timeline-sequence="GridLoaded"
                                data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                            Cancel
                        </button>

                    </div>

                </div>
                <!-- end form buttons-->
            </div>

        </div>






        <div role="vpgrid-modal-dialog"
             title="Suppression d'un item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridDeleteItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <span class="ui-icon  ui-icon-alert" style="float:left; margin:3px 7px 40px 0;">

            </span>
            <span>Etes vous sûr de vouloir supprimer l'élément sélectionné?</span>
            
            <hr />
            <div class="vp-row  vp-modal-dialog-bottom-buttons">
                <div class="span12">

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-trash"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-trash"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.deleteCurrentRow", "async" : true}}'>
                        Supprimer
                    </button>

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                        Annuler
                    </button>

                </div>

            </div>

        </div>

        <div role="vpgrid-modal-dialog"
             title="Suppression d'un item"
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridCannotDeleteItem"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <span class="ui-icon  ui-icon-alert" style="float:left; margin:3px 7px 40px 0;">

            </span>
            <span>L'élément sélectionné ne peut pas être supprimé</span>

            <hr />
            <div class="vp-row  vp-modal-dialog-bottom-buttons">
                <div class="span12">

                    <button type="button" class="float-right ui-button-text-icon-primary ui-icon-cancel"
                            data-vpgrid-ui-widget="button"
                            data-vpgrid-ui-widget-options='{"icons": {"primary": "ui-icon-cancel"}}'
                            data-vpgrid-timeline-sequence="GridLoaded"
                            data-vpgrid-handlers='{"click" : { "handler" : "vpGrid.closeModalDialog", "async" : true}}'>
                        Ok
                    </button>

                </div>

            </div>

        </div>

        <div role="vpgrid-modal-dialog"
             title=""
             class="vpgrid-hidden vpgrid-container vpgrid-modal-dialog"
             data-vpgrid-dialog-id="vpGridToBeDone"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded">

            <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 40px 0;"></span>
            To be done
        </div>


        <div role="vpgrid-modal-dialog"
             title="test"
             class="vpgrid-hidden"
             data-vpgrid-dialog-id="serverSideDialog1"
             data-vpgrid-ui-widget="dialog"
             data-vpgrid-ui-widget-options='{ "modal": true, "autoOpen": false, "width": "auto", "height": "auto"}'
             data-vpgrid-timeline-sequence="GridLoaded"
             data-vpgrid-url="How to Create a vpGrid - Part1.html">
        </div>
        <!-- End modal dialog windows-->

    </div>
    <!-- vpGrid end-->
    <script>
        $(function () {
            vpGrid.init(
                {
                    enableInlineValidationOnInsert:true,
                    loadGridOnPageLoad: true,
                    enableAutomaticPropagationOfUpdateInsertDeleteOperations : true,
                    enableRemoteLogging: false,
                    enableColumnReordering:true,
                    defaultCaption: "AdventureWorks Products",
                    enableFilterToolbar: true,
                    enableOperatorsInFilterToolbar: true,
                    enableCustomCaption: true,
                    enableCustomStatusBar: true,
                    enableRowCheckbox: true,
                    enableSummaryRows: true,
                    placeSummaryRowsOnTop: false,
                    numberOfSummaryRows: 2,
                    numberOfVisibleRows: 5,
                    autoInsertNewLineAtBottom: false,
                    hideLoadingMessageAfter : 500,

                    datepickerOptions: {
                        dateFormat: 'yy/mm/dd',
                        showOtherMonths: true,
                        selectOtherMonths: true,
                        constrainInput: true
                    },
                    crudOptions: {
                        read: "MockRequests/GetDataN.html",
                        insert: "MockRequests/insert1.html",
                        update: "MockRequests/update1.html",
                        'delete': "MockRequests/delete1a.html",
                        update2: "MockRequests/update2.html",
                        readOne: "MockRequests/read1.html"

                    },
                    jqGridOptions: {
                        jgrid: {
                            formatter: {
                                integer: { thousandsSeparator: ",", defaultValue: '0' },
                                number: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' },
                                //number: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00' },
                                currency: { decimalSeparator: ",", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix: " €", defaultValue: '0' },
                                date: { srcformat: 'Y-m-d', newformat: 'Y/m/d' },
                                checkbox: { disabled: false }
                            }
                        }
                    }

                });

        });



        </script>

</body>
</html>
